import React,{useState,useEffect} from "react";
import {  ScrollView,Text,View,ImageBackground,Image,Dimensions,Pressable} from 'react-native';
import Headers from '@/app/components/header/Headers';
import {size} from '@/app/utils';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { styles } from "./style/styles";
import { keepHeadTailWithEllipsis } from '@/app/utils/index'
import { useTranslation } from '@/app/utils/useTranslation';
import { getTuanDuiApi,getTuanDuiWallettransferApi,getRenZhengInfoApi } from './serve'
import Nodata from '@/app/components/Nodata'
import { useNavigation } from "@react-navigation/native";
const MyTeamScreen = (props:any) => {
    const { t } = useTranslation();
    let navigation = useNavigation<any>();
    let [opciaty,setOpciaty] = useState(0);
    let [isRenZheng,setIsRenZheng] = useState(false);
    const height = Dimensions.get('window').height;
    let [navBarHeight,setNavBarHeight] = useState(0);
    let [tabindex,setTabindex] = useState(0);
    let [mytuijiannum,seMytuijiannum] = useState(0);
    let [disabled,setDisabled] = useState(true);
    let [disabled2,setDisabled2] = useState(true);
    let [userInfo,setUserInfo] = useState({
        loginName:null,
        lv:0,
        lvImg:null,
    });
    let [list,setList] = useState([
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
    ]);

    function getNavBarHeight(data:any){
        console.log('getNavBarHeight---:',data);
        setNavBarHeight(data)
    }

    function onTabChange(data:any){
        if(data==tabindex){
            return false;
        }
        setList([
            {},
            {},
            {},
            {},
            {},
            {},
            {},
            {},
            {},
            {},
            {},
            {},
            {},
            {},
            {},
            {},
        ])
        setDisabled(true);
        setTabindex(data);
    }

    useEffect(() => {
        const checkLoginStatus = async () => {
            try {
                const value = await AsyncStorage.getItem('userInfo');
                if (value) {
                    let userInfo = JSON.parse(value);
                   setUserInfo(userInfo);
                    getRenZhengInfo();
                }
            } catch (e) {
                console.error('获取用户信息异常', e);
            }
        };
        
        checkLoginStatus();
    }, []);

    useEffect(()=>{
        getInit();
    },[tabindex])

    const getRenZhengInfo=()=>{
        getRenZhengInfoApi({}).then(res=>{
            let data = res.data?res.data:{};
            setDisabled2(false);
            if(data.id){
                setIsRenZheng(true)
            }else{
                setIsRenZheng(false)
            }
        })
    }

    const getInit=()=>{
        if(tabindex+''=='0'){
            getTuanDuiApi({}).then(res=>{
                setDisabled(false);
                let data = res.data||{};
                list = data.list||[];
                setList(list)
                seMytuijiannum(data.count);
            })
        }else{
            getTuanDuiWallettransferApi({}).then(res=>{
                setDisabled(false);
                let data = res.data||{};
                list = data.data||[];
                setList(list);
            })
        }
    }

    return(
        <ImageBackground style={{ flex: 1,flexDirection:'column'}} source={
          require('@/assets/images/shareapp/1.png')
        }>
            <Headers
                title={t('t422')}
                border={false}
                barStyle={0}
                leftIcon={require('@/assets/images/icon/back.png')}
                leftTitle={''}
                backgroundColor={`rgba(255,255,255,${opciaty})`}
                rightContent={
                    <Image
                        source={
                            require('@/assets/images/logs.png')
                        }
                        style={{width:size(20),height:size(22)}}
                    />
                }
                onClickRightBtn={()=>{
                    navigation.navigate('pages/shareApp/MyTeamLogsScreen')
                }}
                centerColor={'#666'}
                {...props}
                getNavBarHeight={getNavBarHeight}
            />
            <ScrollView 
                onScroll = {(event)=>{{
                    if(event.nativeEvent.contentOffset.y>90){
                        setOpciaty(1);
                    }else{
                        setOpciaty(event.nativeEvent.contentOffset.y/90);
                    }
                }}}
                style={{flex: 1}}
            >
               <View style={styles.shenfenxinxi}>
                    <Image style={styles.choutitouxiangbox} source={require('@/assets/images/home/1.png')}/>
                    <View style={{flex:1,alignItems:'flex-start',marginLeft:size(8),marginRight:size(8)}}>
                        <Text style={styles.emailtext} numberOfLines={1}>{userInfo.loginName?keepHeadTailWithEllipsis(userInfo.loginName,3,8):''}</Text>
                        {disabled2?<View style={{height:size(30),backgroundColor:'#f9f9f9',marginTop:size(10),width:size(140),borderRadius:size(40)}}></View>:isRenZheng?<Pressable style={styles.renzhengcardbox}>
                                <Image style={styles.renzhengcardimg} source={require('@/assets/images/home/12.png')}/>
                                <View>
                                    {/* 已验证身份 */}
                                    <Text>{t('t281')}</Text>
                                </View>
                            </Pressable>:<Pressable style={[styles.renzhengcardbox,styles.renzhengedcardbox]}>
                                <Image style={styles.renzhengcardimg} source={require('@/assets/images/home/16.png')}/>
                                <View>
                                    {/* 未认证 */}
                                    <Text style={{color:"#767676"}}>{t('t352')}</Text>
                                </View>
                        </Pressable>}
                    </View>
                    <View style={{marginTop:size(-10)}}>
                        <Text style={styles.tuijianvaluetext}>{mytuijiannum}</Text>
                        <Text style={styles.tuijianlabeltext}>{t('t423')}</Text>
                    </View>
               </View>
               <View style={[styles.lisbox,{minHeight:size(height-navBarHeight-96-30)}]}>
                 <View style={styles.tabbox}>
                    <Pressable onPress={()=>{
                        onTabChange('0')
                    }} style={[styles.tabitembox,tabindex+''=='0'?styles.tabitemactivebox:null]}>
                        <Text style={[styles.tabitemtextbox,tabindex+''=='0'?styles.tabitemtextactivebox:null]}>{t('t422')}</Text>
                    </Pressable>
                </View>
                <View>
                    <View style={styles.tabletou}>
                        <View style={styles.namebox}>
                            <Text style={styles.tabletoutext}>{t('t424')}</Text>
                        </View>
                        <View style={styles.jinebox}>
                            <Text style={styles.tabletoutext}>{t('t425')}</Text>
                        </View>
                        <View style={[styles.jinebox]}>
                            <Text style={[styles.zhuangtaobox,styles.tabletoutext]}>{t('t426')}</Text>
                        </View>
                        <View style={[styles.jinebox]}>
                            <Text style={[styles.dengjibox,styles.tabletoutext]}>{t('t427')}</Text>
                        </View>
                    </View>
                    {list.map((item,index)=>{
                        if(disabled){
                            return (<View style={styles.tabletou} key={index}>
                                <View style={[styles.namebox,styles.nameiconbox]}>
                                    <View style={[styles.nameboximg,{backgroundColor:'#f9f9f9'}]}>

                                    </View>
                                    <View style={{flex:1}}>
                                        <View style={[{backgroundColor:'#f9f9f9',height:size(20)}]}>

                                        </View>
                                    </View>
                                </View>
                                <View style={styles.jinebox}>
                                    <View style={[{backgroundColor:'#f9f9f9',height:size(20)}]}></View>
                                </View>
                                <View style={[styles.jinebox]}>
                                    <View style={[{backgroundColor:'#f9f9f9',height:size(20)}]}></View>
                                </View>
                                <View style={[styles.jinebox,{marginLeft:size(10)}]}>
                                    <View style={[{backgroundColor:'#f9f9f9',height:size(20)}]}></View>
                                </View>
                            </View>)
                        }else{
                            return (<View style={styles.tabletou} key={index}>
                                <View style={[styles.namebox,styles.nameiconbox]}>
                                    <Image style={styles.nameboximg} source={require('@/assets/images/home/1.png')}/>
                                    <View style={{flex:1}}>
                                        <Text numberOfLines={1}>{(item as any).loginName?keepHeadTailWithEllipsis((item as any).loginName,3,8):''}</Text>
                                    </View>
                                </View>
                                <View style={styles.jinebox}>
                                    <Text style={[styles.tabletoutext,{color:'#13C57E'}]} numberOfLines={1}>{(item as any).sy?(item as any).sy:'0.00'}</Text>
                                </View>
                                <View style={[styles.jinebox]}>
                                    <Text style={[styles.zhuangtaobox,styles.tabletoutext]}>{(item as any).code ? (item as any).code : ''}</Text>
                                </View>
                                <View style={[styles.jinebox]}>
                                    <Text style={[styles.dengjibox,styles.tabletoutext]}>LV{(item as any).level?(item as any).level:'0'}</Text>
                                </View>
                            </View>)
                        }
                    })}
                </View>
                {list.length==0?<View style={{paddingTop:size(60)}}>
                    <Nodata></Nodata>
                </View>:null}
               </View>
            </ScrollView>
        </ImageBackground>
    )
}

export default MyTeamScreen